<template>
  <view class="inner-wrapper pay-wrapper" style="background:#FAFBFB;">
    <view class="background-top" />

    <view class="pay-box">
      <view class="staff-info">
        <image
          class="userinfo-avatar"
          :src="
            user.avatar
              ? user.avatar
              : weixinInfo.avatarUrl
                ? weixinInfo.avatarUrl
                : 'https://hjrl-public.oss-cn-qingdao.aliyuncs.com/uniapp/logo_authorize.png'
          "
        />
        <view class="staff-right">
          <view class="staff-name">{{ site.employeeName }}</view>
          <view class="staff-company">{{ site.companyName }}</view>
        </view>
      </view>
      <view class="calender-wrap flex">
        <image src="/static/images/left.png" @click="reduceYear" />
        <span class="color192">{{ currentYear + "年" }}</span>
        <image src="/static/images/right.png" @click="addYear" />
      </view>
      <view v-if="noList" class="nolist">
        <image src="/payroll/img/meiyou.png" />
        <p>呜呜~你还没有工资条记录</p>
      </view>
      <view v-else class="paylist">
        <div
          v-for="(item, index) in payMonthList"
          :key="index"
          class="payitem flex"
          @click="goMonthDetail(item)"
        >
          <span>{{ item.month + "月工资" }}</span>
          <image src="/static/images/right.png" />
        </div>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState } from "vuex";
import { salaryTableGroupByEmpId } from "@/services/salaryBill";
export default {
  data() {
    return {
      companyId: "",
      confirmed: false,
      show_something_wrong: false,
      payMonthList: {},
      items: [
        { name: "团队提成", parameter: "teamCommission" },
        { name: "补贴福利", parameter: "subsidy" },
        { name: "迟到扣款", parameter: "lateDed" },
        { name: "早退扣款", parameter: "leaveDed" },
        { name: "未打卡扣款", parameter: "uncheckedDed" },
        { name: "旷工扣款", parameter: "absenteeismDed" },
        { name: "综合扣款", parameter: "overallDed" }
      ],
      selectDate: [],
      weixinInfo: {},
      currentYear: "",
      noList: false
    };
  },
  computed: {
    ...mapState(["user", "site"])
  },
  created() {
    uni.getUserInfo({
      provider: "weixin",
      success: res => {
        this.weixinInfo = res.userInfo;
      },
      fail: err => {
        console.log("debug log --> ", err);
      }
    });
    var date = new Date();
    this.currentYear = date.getFullYear();
    this.getlistSalaryBills(this.currentYear);
  },
  methods: {
    reduceYear() {
      this.currentYear--;
      this.getlistSalaryBills(this.currentYear);
    },
    addYear() {
      if (this.currentYear < new Date().getFullYear()) {
        this.currentYear++;
        this.getlistSalaryBills(this.currentYear);
      } else {
        this.currentYear = new Date().getFullYear();
        this.getlistSalaryBills(this.currentYear);
      }
    },
    getlistSalaryBills(year) {
      this.companyId = uni.getStorageSync("companyId");
      this.userId = uni.getStorageSync("employeeId");
      var dataparams = {
        companyId: this.companyId,
        empId: this.userId,
        year: year
      };
      salaryTableGroupByEmpId(dataparams).then(res => {
        this.payMonthList = res;
        if (res.length > 0) {
          this.noList = false;
        } else {
          this.noList = true;
        }
      });
    },
    goMonthDetail(item) {
      uni.navigateTo({
        url: "/payroll/paylist?year=" + item.year + "&month=" + item.month
      });
    },
    getCurrentDate() {
      var date = new Date();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      this.currentData = y + "年" + m + "月";
      this.year = date.getFullYear();
      this.month = date.getMonth() + 1;
    },
    selectDateChange: function(e) {
      this.selectDate = e.detail.value.split("-");
      this.getSalaryBillRelationLast(this.selectDate[0], this.selectDate[1]);
    },
    somethingWrongBtnClick: function(show) {
      this.show_something_wrong = show;
    },
    confirmBtnClick: function() {
      if (!this.confirmed) {
        this.confirmed = true;
      } else {
        console.log("工资已确认");
      }
    }
  }
};
</script>

<style lang="scss">
.background-top {
  position: absolute;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 100px;
  border-bottom-right-radius: 60px;
  border-bottom-left-radius: 60px;
  background-color: $uni-color-primary;
}
</style>
